<template>
  <div :class="$style.wrap">
    <Button type="primary" @click="visible=true">{{ text }}</Button>
    <el-dialog :visible.sync="visible" :title="title" :close-on-click-modal="false" @close="resetForm">
      <FormContainer :column="3">
        <el-form ref="form" :model="formData" :rules="formRules" label-width="90px">
          <el-form-item prop="careObject" label="关怀对象">
            <el-input v-model="formData.careObject" placeholder="请输入关怀对象" clearable></el-input>
          </el-form-item>
          <el-form-item prop="careObjectPhone" label="关怀电话">
            <el-input v-model="formData.careObjectPhone" number placeholder="请输入关怀电话"></el-input>
          </el-form-item>
          <el-form-item prop="careItem" label="关怀项目">
            <CustomDictSelect
              placeholder="请选择关怀项目"
              dict-type-code="KQ_CARE_ITEM"
              bind-name="dictName"
              bind-value="dictCode"
              :echo-value.sync="formData.careItem"
              :echo-name.sync="formData.careItemName"
            ></CustomDictSelect>
          </el-form-item>
          <el-form-item prop="careMode" label="关怀方式">
            <CustomDictSelect
              placeholder="请选择关怀方式"
              dict-type-code="CARE_MODE"
              bind-name="dictName"
              bind-value="dictCode"
              multiple
              collapse-tags
              :echo-value.sync="formData.careMode"
              :echo-name.sync="formData.careModeName"
            ></CustomDictSelect>
          </el-form-item>
          <el-form-item prop="officeCode" label="办事处">
            <SearchSelectPicker
              url="/call-center/api/v1/mscInfo/office/ref/page"
              placeholder="请选择办事处"
              lable-name="name"
              value-name="code"
              method="get"
              :value.sync="formData.officeCode"
              :lable.sync="formData.officeName"
              @selectChange="officeChange"
            ></SearchSelectPicker>
          </el-form-item>
          <el-form-item prop="disCode" label="经销商">
            <SearchSelectPicker
              url="/call-center/api/v1/mscInfo/dealer/ref/page"
              method="get"
              placeholder="请选择经销商"
              :params="{query:{officeCode:formData.officeCode},type:0}"
              lable-name="name"
              value-name="code"
              custom-name="codeOrName"
              :parent-id="formData.officeCode"
              :value.sync="formData.disCode"
              :lable.sync="formData.disName"
              clearable
              @selectChange="disChange"
            ></SearchSelectPicker>
            <!-- :current-id.sync="formData.disId" -->
          </el-form-item>
          <el-form-item prop="shopCode" label="门店">
            <SearchSelectPicker
              url="/call-center/api/v1/mscInfo/shop/page"
              placeholder="请选择门店"
              lable-name="shopName"
              value-name="shopCode"
              custom-name="customerName"
              :remote="false"
              :params="{query:{businessStatus: '1,2,6',status:1,customerName: formData.disName},type:1}"
              :must-pid="true"
              :parent-id="formData.disName"
              :value.sync="formData.shopCode"
              :lable.sync="formData.shopName"
            ></SearchSelectPicker>
          </el-form-item>
          <el-form-item prop="handler" label="分配坐席">
            <StaffSearch v-model="formData.handler" :name.sync="formData.handlerName" placeholder="请选择分配坐席" clearable></StaffSearch>
          </el-form-item>
          <el-form-item prop="agreedCareDate" label="预约关怀日期">
            <el-date-picker v-model="formData.agreedCareDate" type="date" :limite="new Date()" operator="<" placeholder="选择预约关怀日期" clearable></el-date-picker>
          </el-form-item>
          <el-form-item prop="remarks" label="备注" :span="24">
            <el-input v-model="formData.remarks" tip :maxlength="150" type="textarea" :autosize="{minRows:3}" placeholder="请输入备注" />
          </el-form-item>
          <el-form-item :span="24">
            <Button @click="cancelHandle">取消</Button>
            <Button type="primary" @click="confirmHandle">确认</Button>
          </el-form-item>
        </el-form>
      </FormContainer>
    </el-dialog>
  </div>
</template>
<script>
import FormContainer from '@/components/FormContainer'
import CustomDictSelect from '@/components/CustomDictSelect'
import StaffSearch from '@/components/StaffSearch'
import SearchSelectPicker from '@/components/SearchSelectPicker'
import { postConsumerCareTask } from '@/api/guestCare'
import { deepCopy, parseTime } from '@/utils'
export default {
  name: 'Add',
  components: {
    FormContainer,
    CustomDictSelect,
    StaffSearch,
    SearchSelectPicker
  },
  props: {
    title: {
      type: String,
      default: ''
    },
    text: {
      type: String,
      default: ''
    }
  },
  data() {
    const vallidatorPhone = (r, v, c) => {
      if (/^\d{7,16}$/.test(v)) {
        c()
      } else {
        c(new Error('电话号码格式不正确'))
      }
    }
    const vallidatorMode = (r, v, c) => {
      if (v && v.length > 0) {
        c()
      } else {
        c(new Error('请选择关怀方式'))
      }
    }
    return {
      visible: false,
      formData: {
        careObject: '',
        careObjectPhone: '',
        careItem: '',
        careItemName: '',
        careMode: [],
        careModeName: '',
        officeCode: '',
        officeName: '',
        disCode: '',
        disName: '',
        shopCode: '',
        shopName: '',
        handler: '',
        handlerName: '',
        agreedCareDate: '',
        remarks: ''
      },
      formRules: {
        careObject: [{ required: true, message: '请输入关怀对象', trigger: 'change' }],
        careObjectPhone: [{ required: true, message: '请输入关怀电话', trigger: 'change' },
          { required: true, validator: vallidatorPhone, trigger: 'change' }],
        careItem: [{ required: true, message: '请输入关怀对象', trigger: 'change' }],
        careMode: [{ required: true, validator: vallidatorMode, trigger: 'change' }],
        handler: [{ required: true, message: '请选择分配坐席', trigger: 'change' }],
        agreedCareDate: [{ required: true, type: 'date', message: '选择预约关怀日期', trigger: 'change' }]
      }
    }
  },
  methods: {
    resetForm() {
      this.$set(this.formData, 'officeName', '')
      this.$set(this.formData, 'disName', '')
      this.$set(this.formData, 'shopName', '')
      this.$set(this.formData, 'careItemName', '')
      this.$set(this.formData, 'careModeName', '')
      this.$set(this.formData, 'handlerName', '')
      this.$refs.form.resetFields()
    },
    confirmHandle() {
      return this.$refs.form.validate().then(() => {
        const data = deepCopy(this.formData)
        data.agreedCareDate = parseTime(data.agreedCareDate, `{y}-{m}-{d}`)
        data.careMode = data.careMode.join(',')
        return postConsumerCareTask(data).then(res => {
          this.$message.success('添加成功！')
          this.$emit('refresh')
          this.visible = false
        })
      })
    },
    cancelHandle() {
      this.visible = false
    },
    // 办事处相关
    officeChange() {
      this.$set(this.formData, 'disCode', '')
      this.$set(this.formData, 'disName', '')
      this.disChange()
    },
    disChange() {
      this.$set(this.formData, 'shopCode', '')
      this.$set(this.formData, 'shopName', '')
    }
  }
}
</script>
<style lang='scss' module>
.wrap{
    display: inline-block;
}
</style>
